<template>
  <el-dialog
    title="新增嘞部门"
    :visible="isShow"
    width="50%"
    @close="handleClose"
    @open="handleOpen"
  >
    <!-- @close="$emit('update:isShow')"这个是关闭弹框的那个x号 -->
    <!-- 表单  rem在适配移动端，电脑端不适合使用 -->
    <el-form
      ref="deptFormRef"
      label-width="100px"
      :model="deptForm"
      :rules="deptFormRules"
    >
      <!-- placeholder="自定义"这个命令是在文本框中显示灰白字体 -->
      <el-form-item label="部门名称" prop="name">
        <el-input
          v-model="deptForm.name"
          placeholder="部门名称要求1-10个字符"
        />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="deptForm.code" placeholder="长度要求1-10个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="deptForm.manager"
          placeholder="请选择部门负责人"
          style="width: 90%"
        >
          <el-option
            v-for="obj in managerList"
            :key="obj.id"
            :label="obj.username"
            :value="obj.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input
          type="textarea"
          placeholder="0/300"
          v-model="deptForm.introduce"
          style="width: 90%"
        />
      </el-form-item>
    </el-form>
    <!-- 按钮  -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleAddDept"> 确 定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { getManagerListAPI, addDeptAPI } from "@/api/departments";
export default {
  name: "AddDept",
  props: {
    isShow: {
      type: Boolean,
      default: false,
    },
    deptList: {
      type: Array,
      // 引用类型需要写成函数的格式，返回值才是默认值
      default: () => [], //这个必须是个函数然后再返回（箭头函数）
    },
    //接父对象
    item: {
      type: Object,
      default: () => {}, //就是写一个函数，然后返回一个空对象
    },
  },
  data() {
    //自定义校验name的规则
    const validateName = (rule, value, callback) => {
      //rule:当前字段rules的校验规则
      //value：当前字段的值
      //callback：回调函数，不通过传入new Error（）参数；否则不传参
      // console.log(rule, value, callback);
      //用value的值去deptList数组做对比
      // some(): 检测数组中是否有满足条件的元素; 若有返回true; 否则返回false
      const isSame = this.deptList.some((item) => item.name === value);
      // 遍历数组，用每次拿到的部门对象名字和输入的名字比对
      isSame ? callback(new Error(`【${value}】部门已经重复存在`)) : callback(); // 三元表达式
    };
    //自定义校验code的规则
    const validateCode = (rule, value, callback) => {
      const isSame = this.deptList.some((item) => item.code === value);
      // 遍历数组，用每次拿到的部门对象名字和输入的名字比对
      isSame
        ? callback(new Error(`【${value}】部门编码已经重复存在`))
        : callback(); // 三元表达式
    };
    return {
      //部门列表
      deptForm: {
        name: "",
        code: "",
        manager: "",
        introduce: "",
      },
      // 部门表单校验规则 （需要借助后台返回的数据来进行判断部门是否冲突）
      deptFormRules: {
        name: [
          {
            //部门名称
            required: true, //显示部门表单的那个红色的星号
            message: "部门名称不能为空",
            trigger: ["change", "blur"],
          },
          {
            min: 1,
            max: 10,
            message: "部门名称要求1-10个字符",
            trigger: ["blur", "change"],
          },
          // 调用自定义校验函数
          { validator: validateName, trigger: "blur" },
        ],
        code: [
          {
            //部门编码
            required: true, //显示部门表单的那个红色的星号
            message: "部门编码不能为空",
            trigger: ["change", "blur"],
          },
          {
            min: 1,
            max: 10,
            message: "长度要求1-10个字符",
            trigger: ["blur", "change"],
          },
          // 调用自定义校验函数
          { validator: validateCode, trigger: "blur" },
        ],
        manager: [
          {
            //负责人
            required: true, //显示部门表单的那个红色的星号
            message: "部门负责人不能为空",
            trigger: "change",
          },
        ],
        introduce: [
          {
            //介绍
            required: true, //显示部门表单的那个红色的星号
            message: "部门介绍不能为空",
            trigger: ["change", "blur"],
          },
          {
            min: 1,
            max: 300,
            message: "部门介绍要求1-300个字符",
            trigger: ["blur", "change"],
          },
        ],
      },
      //负责人列表
      managerList: [],
    };
  },
  methods: {
    //添加部门
    handleAddDept() {
      // console.log("456");//打印是否获取到部门
      // 整体校验
      this.$refs.deptFormRef.validate(async (valid) => {
        // 如果校验不通过，直接结束执行
        if (!valid) return;
        // console.log("555");// 获取到是否得到数据
        //发起新的请求
        await addDeptAPI({
          ...this.deptForm,
          //this.item.manager有值，则添加的不是一级部门，当前部门id就是新增部门的pid
          //否则添加的就是一级部门，一级部门id给空字符串
          pid: this.item.manager ? this.item.id : "", //三元表达式有值就是一级，要是没值就是个空
        });
        //关闭弹层
        this.handleClose();
        //获取部门列表
        //this.$parent: 获取某个组件的父组件(对象) 不推荐使用
        //this.$children: 获取某个组件的所有子组件数组(对象)  不推荐使用
        // this.$parent.getDeptList();
        // 推荐使用子传父，父组件获取部门列表
        this.$emit("add-dept-success"); //this.$emit("自定义")
      });
    },
    //弹框打开时
    async handleOpen() {
      if (this.managerList.length) return;
      //发送请求负责人的列表
      const resp = await getManagerListAPI();
      // 保存负责人列表的data数据
      this.managerList = resp.data;
    },
    //当关闭弹框时给弹框绑定一个事件
    handleClose() {
      //触发自定义事件 ，通知父组件，关闭弹框，父组件用来sync修饰符，
      //会自动监听@update：isShow事件
      this.$emit("update:isShow", false);
      //重置表单让打开的表单内容为空（清空value+上次校验的值）
      this.$refs.deptFormRef.resetFields();
    },
  },
};
// 就是新增数据：首先让tree-tool子组件去访问父组件（就是子传父），然后
// 父组件接收数据 把数组传给add-dept字组件（就是父传子）
</script>
<style scoped>
.el-input {
  width: 90%;
}
</style>
